<template>
  <div class="pass-wrap">
    <div class="pass-box">
      <span>姓名：</span><span>{{name}}</span>
    </div>
    <div class="pass-box">
      <span>身份证号：</span><span>{{certNo}}</span>
    </div>
    <div class="pass-box">
      <span>借支金额：</span>
      <div class="money-box">
        <input type="text" placeholder="请输入借支金额" v-model="money" class="money" @blur="inputBlur" maxlength="5"
               @input="limitMoney"/>
        <img src="./edit.png" class="edit" onclick="return false"/>
      </div>
    </div>

    <div class="limit-box">
      <span class="lend-time">员工归属：</span>
      <div class="day-box">
        <popup-picker :data="vestList" v-model="vest" class="day" placeholder="请选择员工归属"></popup-picker>
        <img src="../in.png" class="pic" onclick="return false"/>
      </div>
    </div>

    <div class="reason-box">
      <span class="title">审批理由：</span>
      <textarea class="content" maxlength="30" placeholder="请输入审批理由" v-model="reason" @blur="inputBlur"></textarea>
    </div>

    <div class="btn-box" v-show="hideBtn">
      <div class="remind-box" v-show="refuseNum >= 2">
        <img src="./remind.png" class="remind-pic"/>
        <span class="remind-text">该员工七天内已被拒绝{{refuseNum}}次，请谨慎处理</span>
      </div>

      <button type="button" class="btn" @click="lendPass">提交</button>
    </div>

  </div>
</template>

<script>
  import {toDecimal} from "../../../config/util"
  import {baseUrl} from "../../../config/env"
  import {PopupPicker} from 'vux'

  export default {
    data() {
      return {
        money: "",
        lendMoney: "",
        reason: "",
        name: "",
        certNo: "",
        id: "",
        userSign: "",
        vest: [],
        vestList: [["蓝聘", "大和", "上势", "大赢和"]],
        refuseNum: this.$route.query.refuseNum,
        docmHeight: document.documentElement.clientHeight,//默认屏幕高度
        showHeight: document.documentElement.clientHeight,//实时屏幕高度
        hideBtn: true//显示或者隐藏
      }
    },
    mounted() {
      if (this.$route.query.remark) {
        this.vest.push(this.changeType(this.$route.query.remark));
      }
      this.lendMoney = this.$route.query.num;//借支金额
      this.money = toDecimal(this.$route.query.num) + "元";
      this.name = this.$route.query.name;
      this.certNo = this.$route.query.cert;
      this.id = this.$route.query.id;
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
      window.onresize = () => {
        return (() => {
          this.showHeight = document.body.clientHeight;
        })()
      };
    },
    methods: {
      changeType(type) {
        let temp = "";
        if (type == "LP") {
          temp = "蓝聘";
        } else if (type == "DH") {
          temp = "大和";
        } else if (type == "SS") {
          temp = "上势";
        } else if (type == "DYH") {
          temp = "大赢和";
        }
        return temp;
      },
      changeValue(type) {
        let temp = "";
        if (type == "蓝聘") {
          temp = "LP";
        } else if (type == "大和") {
          temp = "DH";
        } else if (type == "上势") {
          temp = "SS";
        } else if (type == "大赢和") {
          temp = "DYH";
        }
        return temp;
      },
      limitMoney() {
        if (this.money.indexOf("元") != -1) {
          this.money = this.money.replace("元", "");
        }
        if (eval(this.money) > eval(this.lendMoney)) {
          this.money = "";
        }
      },
      checkMoney(money) {
        if (money.indexOf("元") != -1) {
          money = money.replace("元", "");
        }
        let reg = /^([1-9]\d{0,9}|0)([.]?|(\.\d{1,2})?)$/;
        if (money == "" || money == null || money == undefined) {
          this.$vux.toast.text("请输入借支金额", "middle");
          return;
        } else if (money == 0 || !reg.test(money)) {
          this.$vux.toast.text("请输入正确的金额", "middle");
          return;
        }
        if (this.vest.length == 0) {
          this.$vux.toast.text("请选择员工归属", "middle");
          return;
        }
        return true;
      },
      lendPass() {
        if (this.checkMoney(this.money)) {
          if (this.money.indexOf("元") != -1) {
            this.money = this.money.replace("元", "");
          }
          //审核借支状态
          this.$vux.loading.show({
            text: '加载中',
          });

          let time = (new Date()).getTime();
          let url = baseUrl + "/resident/update_lend_money_status?timestamp=" + time;
          let param = {"sgin": this.userSign, "timestamp": time};
          let signature = this.$signature(url, param);

          this.axios.get(baseUrl + "/resident/update_lend_money_status?sgin=" + this.userSign + "&status=1" + "&id=" + this.id + "&reason=" + this.reason + "&money=" + this.money + "&userRemark=" + this.changeValue(String(this.vest)) + "&auth=" + signature + "&timestamp=" + time).then((res) => {
            let resultObj = res.data;
            this.$vux.loading.hide();
            if (resultObj.code == 0) {
              if (resultObj.data == 0) {
                this.$vux.toast.text("审核失败，请重试", "middle");
              } else {
                this.$router.push({path: "/lendmanage"});
              }
            } else {
              this.$vux.toast.text(resultObj.msg, "middle");
            }
          }).catch(() => {
            this.$vux.loading.hide();
            this.$vux.toast.text("网络异常", "middle");
          });

        }
      },
      inputBlur() {
        window.scrollTo(0, 0);
      }
    },
    watch: {
      showHeight() {
        if (this.docmHeight > this.showHeight) {
          this.hideBtn = false;
        } else {
          this.hideBtn = true;
        }
      }
    },
    components: {
      PopupPicker
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .pass-wrap
    wh(100%, 100%)
    overflow: hidden
    background: rgba(255, 255, 255, 1)
    .pass-box
      fj(space-between, center)
      wh(100%, 1.28rem)
      background: rgba(255, 255, 255, 1)
      border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
      span
        size-color(0.427rem, rgba(51, 51, 51, 1))
        &:nth-child(1)
          margin-left: 0.333rem
        &:last-child
          margin-right: 0.333rem
      .money-box
        fj(flex-end, center)
        flex: 1
        margin-right: 0.333rem
        height: 1.28rem
        .money
          text-align: right
          margin-right: 0.307rem
          height: 0.6rem
          line-height: 0.6rem
          size-color(0.427rem, rgba(60, 175, 255, 1))
          font-weight: 500
        .edit
          wh(0.48rem, 0.48rem)
    .limit-box
      fj(space-between, center)
      wh(100%, 1.28rem)
      border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
      .lend-time
        margin-left: 0.333rem
        font-size: 0.427rem
        color: rgba(51, 51, 51, 1)
      .day-box
        display: flex
        align-items: center
        margin-right: 0.32rem
        .day
          font-size: 0.427rem
          color: rgba(153, 153, 153, 1)
        .day >>> .vux-cell-primary .vux-popup-picker-placeholder
          color: #cccccc
        .day >>> .vux-cell-primary .vux-popup-picker-value
          color: rgba(51, 51, 51, 1)
        .pic
          margin-left: 0.2rem
          width: 0.32rem
          height: 0.32rem
    .reason-box
      display: flex
      flex-direction: column
      wh(100%, 3.813rem)
      .title
        margin-top: 0.427rem
        margin-left: 0.32rem
        margin-bottom: 0.307rem
        size-color(0.427rem, rgba(51, 51, 51, 1))
      .content
        margin: 0 auto
        padding-top: 0.267rem
        padding-left: 0.267rem
        width: 93.6%
        height: 2.667rem
        font-size: 0.373rem
        color: rgba(51, 51, 51, 1)
        line-height: 0.48rem
        border: 0.027rem solid rgba(224, 224, 224, 1)
        border-radius: 0.053rem
        resize: none
    .btn-box
      position: absolute
      bottom: 0.64rem
      display: flex
      justify-content: center
      align-items: center
      wh(100%, auto)
      flex-direction: column
      .btn
        width: 90.4%
        height: 1.28rem
        line-height: 1.28rem
        background: rgba(60, 175, 255, 1)
        font-size: 0.453rem
        color: rgba(255, 255, 255, 1)
        font-weight: 500
        border-radius: 0.16rem
      .remind-box
        display: flex
        align-items: center
        justify-content: center
        width: 100%
        padding-bottom: 0.48rem
        .remind-pic
          wh(0.4rem, 0.4rem)
        .remind-text
          padding-left: 0.2rem
          size-color(0.373rem, #FF5353)
</style>
